import IntegrationTable, {
	IntegrationTableProps,
	OperatingItem,
} from "@/components/IntegrationTable";
import { ProColumns } from "@ant-design/pro-table";
import React, { useEffect, useState } from "react";
import { role, userStatistics } from "./service";
import { arrayToObject, getArray, getString } from "phinney-toolkit";
import {
	Tag,
	Image,
	Tabs,
	Card,
	Row,
	Col,
	Statistic,
	Descriptions,
} from "antd";
import QRCode from "qrcode-react";
// @page 商家
const Business: React.FC<any> = () => {
	// 组件是否已经卸载
	let isUnMounted = false;
	// 小区列表
	const [roleList, setRoleList] = useState<any>([]);
	const [userDate, setUserDate] = useState<any>("");

	// 获取权限
	const getUserList = async () => {
		const res = await role();
		!isUnMounted &&
			setRoleList(
				getArray(res?.data).map((item) => ({
					label: item?.name,
					value: item?.code,
				}))
			);
	};

	const getUserStatistics = async () => {
		const res = await userStatistics({});
		setUserDate({
			todayActiveNum: res?.data.todayActiveNum,
			todayIncreaseNum: res?.data.todayIncreaseNum,
			totalUserNum: res?.data.totalUserNum,
			yesterdayActiveNum: res?.data.yesterdayActiveNum,
			yesterdayIncreaseNum: res?.data.yesterdayIncreaseNum,
		});
	};

	// 表格项
	const columns: ProColumns[] = [
		{
			title: "序号",
			dataIndex: "id",
			search: false,
		},
		{
			title: "用户Code",
			dataIndex: "userCode",
			search: false,
		},
		{
			title: "用户手机号",
			dataIndex: "phone",
		},
		{
			title: "用户昵称",
			dataIndex: "userNickName",
			search: false,
		},
		{
			title: "用户头像",
			dataIndex: "userHeadImage",
			hideInSearch: true,
			render: (_, record: any) => {
				if (record.userHeadImage) {
					return (
						<Image.PreviewGroup>
							<Image
								src={record.userHeadImage}
								style={{ padding: 8 }}
								width={50}
								alt=""
							/>
						</Image.PreviewGroup>
					);
				} else {
					return <div>-</div>;
				}
			},
		},

		{
			title: "注册日期",
			dataIndex: "createTime",
			search: false,
		},
		{
			title: "角色",
			dataIndex: "role",
			valueEnum: arrayToObject(roleList),
			render: (_, record: any) => {
				return !!record?.promoteFlag ? (
					<div>
						<Tag color="#2db7f5" style={{ marginBottom: "10" + "px" }}>
							{record?.roleName}
						</Tag>
						<QRCode
							value={`{ "promoterCode":"${record?.promoteUserVO.promoterCode}","communityCode":"${record?.promoteUserVO.communityCode}","type":"${record?.promoteUserVO.type}" }`}
						/>
						{/* <Image src={record?.promoteUserVO} style={{ padding: 8 }} width={50} alt="" /> */}
					</div>
				) : (
					<span>
						{" "}
						<Tag color="#2db7f5" style={{ marginBottom: "10" + "px" }}>
							{record?.roleName}
						</Tag>
					</span>
				);
			},
		},
	];

	const columnss: ProColumns[] = [
		{
			title: "id",
			dataIndex: "id",
			search: false,
		},
		{
			title: "登录时间",
			dataIndex: "createTime",
			search: false,
		},
		{
			title: "登录方式",
			dataIndex: "loginType",
			valueEnum: {
				1: "手机号登录",
				2: "微信登录",
				3: "设备号登录",
				4: "手机号一键登录",
			},
		},
		{
			title: "userCode",
			dataIndex: "userCode",
			search: false,
		},
	];

	const handelFunc = (vm: any) => {
		let params = {
			rowKey: "id",
			scroll: { x: 1000 },
			columns: columnss,
			search: false,
			isInModal: true,
			toolBarRender: false,
			toolbar: false,
			PageHeaderWrapper: false,
			listProps: {
				url: "/user/login-log-list",
				method: "GET",
				requestType: "params",
				formProps: {
					labelCol: { span: 4 },
				},
				paramsHandle: (params: any, record: any) => {
					return {
						...params,
						userCode: vm.state.record.userCode,
					};
				},
			},
		};
		return (
			<div>
				<Tabs>
					<Tabs.TabPane tab="登录日志" key="1">
						<IntegrationTable {...params} />
					</Tabs.TabPane>
				</Tabs>
			</div>
		);
	};

	// 一体化表格props
	const tablePorps: IntegrationTableProps = {
		rowKey: "id",
		scroll: { x: 1000 },
		columns,
		listProps: {
			url: "/user/userList",
			method: "GET",
			requestType: "params",
			paramsHandle: (params: any) => {
				return {
					...params,
				};
			},
		},
		handleOperating: () => {
			return [
				// 角色权限
				{
					type: "modal",
					props: {
						url: "/role/setUserRole",
						method: "POST",
						btnText: "设置角色权限",
						modalProps: {
							title: "设置角色权限",
							formProps: {
								labelCol: { span: 4 },
							},
							formItems: [
								{
									type: "select",
									name: "roleCode",
									label: "角色",
									options: roleList,
									fieldProps: {
										mode: "multiple",
									},
								},
							],
							formValuesHandle: (record: any) => {
								return {
									...record,
									roleCode: record?.roleCode?.split(","),
								};
							},
						},
						paramsHandle: ({ roleCode, status }: any, record: any) => ({
							userCode: record?.userCode,
							status,
							roleCodes: getArray(roleCode).toString(),
						}),
					},
				},
				{
					type: "modal",
					props: {
						btnText: "详情",
						modalProps: {
							width: 1200,
							footer: false,
							title: "用户详情",
							content: {
								render: (vm: any, getModalRef: any) => {
									return handelFunc(vm);
								},
							},
							onCancel: (table: any) => {
								table?.reload();
							},
						},
					},
				},
			];
		},
		tableBefore: () => {
			return (
				<div>
					<Card style={{ marginBottom: 20 }}>
						<Row>
							<Col span={4}>
								<Statistic title="总安装数" value={userDate.totalUserNum} />
							</Col>
							<Col span={4}>
								<Statistic title="今日新增" value={userDate.todayIncreaseNum} />
							</Col>
							<Col span={4}>
								<Statistic
									title="昨日新增"
									value={userDate.yesterdayIncreaseNum}
								/>
							</Col>
						</Row>
					</Card>
				</div>
			);
		},
	};

	// 初始化加载数据
	useEffect(() => {
		getUserStatistics();
		getUserList();
		return () => {
			isUnMounted = true;
		};
	}, []);

	return <IntegrationTable {...tablePorps} />;
};

export default Business;
